
<template>
  <div>
<div style="height: 1000px; overflow: auto">
  <el-card>
    <div slot="header" class="clearfix">
      <el-button style="float: left; " type="primary" @click="bucketDialogVisible = true">新增存储桶</el-button>
<!--      <el-select v-model="testValue" placeholder="导入存储桶" style="float: right">-->
<!--        <el-option-->
<!--          v-for="item in options"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
    </div>
    <el-row>
      <el-col :span="6" v-for="(o,index) in bucketInfo" :key="index" :offset="0">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" style="width: 400px; height: 150px">
          <div style="padding: 10px;" >
            <el-descriptions :title="o.name"
              :column="2"
            >
              <template #extra>
                <el-button type="primary" slot="reference" size="mini" style="margin-right: 5px" @click="uploadPic(o)">上传文件</el-button>
                <el-button type="primary" slot="reference" size="mini" style="margin-right: 5px" @click="viewPic(o)">查看</el-button>
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="deleteBucket(o)"
                >

                  <el-button type="danger" slot="reference" size="mini">删除</el-button>
                </el-popconfirm>
              </template>
              <el-descriptions-item label="文件数量"><el-tag size="small">{{o.filecount}}</el-tag></el-descriptions-item>
              <el-descriptions-item label="占用存储"><el-tag size="small">{{o.size}}MB</el-tag></el-descriptions-item>
              <el-descriptions-item label="创建时间">
                <el-tag size="small">{{o.time}}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            </div>
        </el-card>

      </el-col>
    </el-row>
  </el-card>
  <el-dialog
    title="新增"
    :visible.sync="bucketDialogVisible"
    width="30%">
    <el-row type="flex" class="row-bg">
      <el-tag type="success">1.存储桶名称长度必须至少为3且不超过63个字符</el-tag>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-tag type="success">2.存储桶名称不得包含大写字符或下划线</el-tag>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-tag type="success">3.存储桶名称必须以小写字母或数字开头</el-tag>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-tag type="success">4.存储桶名称必须符合DNS命名约定</el-tag>
    </el-row>
    <el-input v-model="bucketName" placeholder="请输入存储桶名称"></el-input>
    <span slot="footer" class="dialog-footer">
    <el-button @click="bucketDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="createBucket">确 定</el-button>
  </span>
  </el-dialog>
  <el-dialog
    title="上传"
    :visible.sync="pictureDialogVisible"
    width="25%"
    >
    <el-upload
      class="upload-demo"
      drag
      :before-upload="beforeUpload"
      :data=bucketData
      ref="picupload"
      action="http://127.0.0.1:8000/datasource/savepicture/"
   >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-select v-model="selectValue" filterable placeholder="图片关联类别" style="width: 360px" @change="uploadPicInfo.type = selectValue">
      <el-option
        v-for="item in typeList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <span slot="footer" class="dialog-footer">
    <el-button @click="pictureDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="uploadPicSuccess">确 定</el-button>
  </span>
  </el-dialog>
  <el-dialog
    title="详情"
    :visible.sync="viewPictureDialogVisible"
    width="50%">
    <el-card>
      <div slot="header" class="clearfix">
          <el-popconfirm
          title="确定删除吗？"
          @confirm="deleteObjectsAll"
        >
          <el-button type="danger" slot="reference" size="mini">删除所选</el-button>
        </el-popconfirm>
      </div>

      <el-row>
        <el-table
          ref="multipleTable"
          :data="picList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="文件名称"
            width="120">
            <template slot-scope="scope">{{ scope.row.object_name }}</template>
          </el-table-column>
          <el-table-column
            prop="bucket_name"
            label="所在桶名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="size"
            label="文件大小"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
<!--        <el-col :span="6" v-for="(o,index) in picList" :key="index" :offset="0">-->
<!--          <el-card :body-style="{ padding: '0px' }" shadow="hover" style="width: 400px; height: 150px">-->
<!--            <div style="padding: 10px;" >-->
<!--              <el-image  class="demonstration" :src="o"></el-image>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
        </el-row>
      </el-card>
  </el-dialog>
</div>
  </div>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { CreateBucket, getBucket, removeBucket, getBucketall, GetTypeList, postPicInfo, deleteObject } from './api'

export default {
  name: 'bucket',
  data () {
    return {
      multipleSelection: [],
      testValue: '',
      options: [{
        value: '选项1',
        label: '阿里云OSS'
      }, {
        value: '选项2',
        label: '腾讯COS'
      }, {
        value: '选项3',
        label: '天翼云OOS'
      }, {
        value: '选项4',
        label: 'Gitee图床'
      }, {
        value: '选项5',
        label: '七牛云KODO'
      }],
      bucketData: {
        bucketName: '',
        id: 0
      },
      currentDate: new Date(),
      bucketName: '',
      bucketDialogVisible: false,
      pictureDialogVisible: false,
      viewPictureDialogVisible: false,
      bucketInfo: [],
      picList: '',
      typeList: {},
      selectValue: '',
      uploadPicInfo: {
        bucketName: '',
        type: 0,
        fileInfo: {}
      }
    }
  },
  created () {
    this.bucketList()
  },
  methods: {
    async deleteObjectsAll () {
      const res = await deleteObject({
        info: this.multipleSelection
      })
      console.log(res)
      if(res.code === 2000){
        this.$message.success(res.msg)
      }
      this.viewPictureDialogVisible = false
      this.bucketList()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      console.log('api', api)
      return api.AddObj(row)
    },
    updateRequest (row) {
      console.log('----', row)
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    async createBucket () {
      this.bucketDialogVisible = false
      const res = await CreateBucket({
        bucketName: this.bucketName

      })
      this.bucketName = ''
      this.bucketList()
    },
    async bucketList () {
      const res = await getBucket()
      this.bucketInfo = res.data.data
    },
    async deleteBucket (o) {
      const res = await removeBucket(o.name)
      console.log(res)
      this.bucketList()
    },
    async uploadPic (o) {
      const res = await GetTypeList()
      this.typeList = res.data.data
      this.pictureDialogVisible = true
      this.bucketData.bucketName = o.name
      this.uploadPicInfo.bucketName = o.name
    },
    async  uploadPicSuccess () {
      const res = await postPicInfo({
        name: this.uploadPicInfo.fileInfo.name,
        type: this.uploadPicInfo.type,
        creator: 1,
        is_deleted: false,
        src: this.bucketData.bucketName
      })
      console.log(res)
      this.pictureDialogVisible = false
      this.$message.success('上传成功')
      this.bucketList()
      this.$refs.picupload.clearFiles();
    },
    async viewPic (o) {
      const res = await getBucketall(o)
      this.viewPictureDialogVisible = true
      this.picList = res.data.data
      console.log(this.picList)
    },
    beforeUpload (e) {
      this.uploadPicInfo.fileInfo = e
    }

  }
}
</script>

<style >
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "  ";
}

.clearfix:after {
  clear: both
}
</style>
